<template>
  <div>
    <el-dialog
      title="按订单验收选择"
      :visible.sync="ordervisabled"
      width="80%"
      :before-close="handleClose"
      @opened="initData"
      :destroy-on-close="true"
    >
      <div v-loading="dialogLoading">
        <div
          class="ccui-advanced-search-wrapper ccui-clearfix"
          style="position:relative"
        >
          <div class="types-wp">
            <div class="label">验收类型：</div>
            <el-select
              :disabled="$route.query.title === '按订单验收'"
              v-model="yanshouType"
              placeholder="请选择"
            >
              <el-option
                v-for="item in options"
                :key="item.label"
                :label="item.label"
                :value="item.label"
              >
              </el-option>
            </el-select>

            <!-- 填报单位 -->
            <div class="label" style="margin-left:20px;">填报单位：</div>
            <el-select v-model="orgName" placeholder="请选择填报单位">
              <el-option
                v-for="item in umOrganizations"
                :key="item.orgId"
                :label="item.name"
                :value="item.orgId"
              >
              </el-option>
            </el-select>
          </div>
          <el-search
            :formProp="filter"
            @search="search"
            :isShow="isShow"
            @resetForm="resetForm"
          >
            <!-- 单行搜索 -->
            <template slot="search">
              <el-input
                v-model="filter.thirdCategoriesOfName"
                clearable
                searchLabel="分类名称"
                placeholder="请输入分类名称模糊查询"
                @blur="handleTrim('thirdCategoriesOfName')"
              ></el-input>
              <el-input
                v-model="filter.orderNo"
                clearable
                searchLabel="订单编号"
                placeholder="请输入订单编号模糊查询"
              ></el-input>
              <el-input
                v-model="filter.contractCode"
                clearable
                searchLabel="合同编号"
                placeholder="请输入合同编号模糊查询"
              ></el-input>
              <el-input
                v-model="filter.reportInOrgName"
                clearable
                searchLabel="填报单位"
                placeholder="请输入填报单位模糊查询"
                @blur="handleTrim('reportInOrgName')"
              ></el-input>
            </template>
            <!-- 展开后多个搜索 -->
            <el-input
              v-model="filter.thirdCategoriesOfName"
              clearable
              slot="searchItem4"
              searchLabel="分类名称"
              placeholder="请输入分类名称模糊查询"
            ></el-input>
            <el-input
              v-model="filter.orderNo"
              clearable
              slot="searchItem1"
              searchLabel="订单编号"
              placeholder="请输入订单编号模糊查询"
            ></el-input>
            <el-input
              v-model="filter.contractCode"
              searchLabel="合同编号"
              clearable
              slot="searchItem2"
              placeholder="请输入合同编号模糊查询"
            ></el-input>
            <el-input
              v-model="filter.reportInOrgName"
              clearable
              slot="searchItem3"
              searchLabel="填报单位"
              placeholder="请输入填报单位模糊查询"
            ></el-input>
          </el-search>
        </div>
        <!-- 表格 -->
        <div class="ccui-multifunctional-table-wrapper">
          <el-table
            :data="tableData"
            style="min-height: 300px;"
            height="100%"
            border
          >
            <el-table-column fixed type="index" label="序号" width="50">
            </el-table-column>
            <el-table-column
              fixed
              width="150"
              prop="orderNo"
              :show-overflow-tooltip="true"
              label="订单编号"
            ></el-table-column>
            <el-table-column
              fixed
              prop="orderName"
              width="300"
              :show-overflow-tooltip="true"
              label="订单名称"
            ></el-table-column>
            <el-table-column
              prop="contractCode"
              label="合同编号"
              :show-overflow-tooltip="true"
              width="150"
            ></el-table-column>
            <el-table-column
              prop="contractName"
              label="合同名称"
              :show-overflow-tooltip="true"
              width="300"
            ></el-table-column>
            <el-table-column
              prop="reportInOrgName"
              :show-overflow-tooltip="true"
              label="填报单位"
              width="200"
            ></el-table-column>
            <el-table-column
              prop="partyBName"
              :show-overflow-tooltip="true"
              width="200"
              label="供应商名称"
            ></el-table-column>
            <el-table-column
              prop="thirdCategoriesOfName"
              :show-overflow-tooltip="true"
              width="100"
              label="分类名称"
            ></el-table-column>
            <el-table-column
              prop="orderQuantity"
              width="100"
              label="订单数量"
              :formatter="numFormatter"
              :show-overflow-tooltip="true"
            ></el-table-column>
            <el-table-column
              prop="shipmentsNum"
              :show-overflow-tooltip="true"
              label="发货单数量"
              :formatter="shipmentsNumFormatter"
              width="100"
            ></el-table-column>
            <el-table-column
              prop="shipmentsNum"
              :show-overflow-tooltip="true"
              label="计量单位"
              width="100"
            ></el-table-column>
            <el-table-column fixed="right" label="操作" width="50">
              <template slot-scope="scope">
                <el-button
                  type="text"
                  size="small"
                  @click="yanshou(scope.row, scope.$index)"
                >
                  <span :class="[index === scope.$index ? 'yanshou' : '']"
                    >验收</span
                  ></el-button
                >
              </template>
            </el-table-column>
          </el-table>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { listPageOrder, getUserInfo, getOgenName } from "../api/index";
import { formatNumber, addUrlPerFix } from "@/basa/utils";

export default {
  props: {
    ordervisabled: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      index: null,
      isShow: false,
      filter: {},
      orgName: "",
      umOrganizations: [],
      yanshouType: "按订单验收",
      orgRow: {},
      dialogLoading: false,
      // 类型选项
      options: [
        // {
        //   label: "按发货单验收"
        // },
        {
          label: "按订单验收"
        },
        {
          label: "按合同验收"
        }
      ],
      curentItem: null,

      tableData: []
    };
  },
  watch: {
    yanshouType: {
      handler(n) {
        switch (n) {
          // case "按发货单验收":
          //   this.$emit("dingdanOtherDialog", {
          //     name: "deliveryvisabled",
          //     isShow: true
          //   });
          //   this.yanshouType = "按订单验收";
          //   this.handleClose();
          //   break;
          case "按合同验收":
            // this.$emit("contractvsabled", true);
            this.$emit("dingdanOtherDialog", {
              name: "contractvsabled",
              isShow: true
            });
            this.yanshouType = "按订单验收";
            this.handleClose();
            break;
          case "按订单验收":
            break;
        }
      },
      immediate: true
    },
    orgName: {
      handler(n) {
        const arr = this.umOrganizations.filter(item => {
          return item.orgId === n;
        });
        this.orgRow = { orgId: arr[0].orgId, orgName: arr[0].name };
        this.getDingdanList({ reportInOrgId: arr[0].orgId });
      }
    }
  },
  created() {
    this.initData();
  },

  beforeRouteLeave(to, from, next) {
    this.$destroy();
    next();
  },
  methods: {
    // 弹框显示回调
    initData() {
      this.userInfo();
    },
    // 获取列表数据
    getDingdanList(shearchVal = {}) {
      this.dialogLoading = true;
      listPageOrder({
        ...shearchVal,
        permissionsType: 4,
        listQueryType: 5
      }).then(res => {
        const { data } = res.data;
        this.tableData = data.orderBasicList;
        this.dialogLoading = false;
      });
    },
    // 验收点击事件
    yanshou(row, index) {
      if (this.orgName.length < 1) {
        this.$message.warning("请选择填报单位");
        return;
      }

      this.curentItem = row;
      this.index = index;
      this.$router.push({
        path: "/checkManagement/materialRentManage/add",
        query: {
          status: "新增",
          title: "按订单验收",
          contractId: this.curentItem.pcConcId,
          data: this.curentItem.id,
          htCode: this.curentItem.contractCode,
          orgRow: JSON.stringify(this.orgRow)
        }
      });
      this.handleClose();
    },
    // 确定按钮
    confirm(val) {
      if (!this.curentItem) {
        this.$message.error("未选择验收项");
        return;
      }
      this.$router.push({
        path: "/checkManagement/materialRentManage/add",
        query: {
          status: "新增",
          title: "按订单验收",
          contractId: this.curentItem.pcConcId,
          data: this.curentItem.id,
          htCode: this.curentItem.contractCode
        }
      });
      this.handleClose();
    },
    // 关闭弹框
    handleClose() {
      this.curentItem = null;
      this.index = null;
      document.getElementsByClassName(".yanshou").style =
        "color: #0089EF !important;";
      this.$emit("update:ordervisabled", false);
    },
    resetForm() {
      this.curentItem = null;
      this.index = null;
    },
    // 搜索
    search(shearchVal) {
      shearchVal.reportInOrgId = this.orgRow.orgId;
      this.getDingdanList(shearchVal);
    },
    numFormatter(row) {
      return formatNumber(row.orderQuantity, 3);
    },
    shipmentsNumFormatter(row) {
      return formatNumber(row.shipmentsNum, 3);
    },
    // 获取填报单位
    getOgenName(openId) {
      getOgenName({ openIds: [openId] }).then(res => {
        this.umOrganizations = res.data.data[openId];
        this.orgName = this.umOrganizations[0].orgId;
        this.dialogLoading = false;
      });
    },
    // 获取用户信息
    userInfo() {
      this.dialogLoading = true;
      getUserInfo(
        addUrlPerFix(process.env.VUE_APP_BASEP_URL) + "/apis/basap/getUserInfo",
        {}
      ).then(res => {
        const { userInfo } = res.data.data;
        this.getOgenName(userInfo.openId);
      });
    },
    // 清空名称空格
    handleTrim(key) {
      this.$set(
        this.filter,
        key,
        this.filter[key].replace(/(^\s*)|(\s*)$/g, "")
      );
    }
  }
};
</script>

<style lang="scss" scoped>
.types-wp {
  display: flex;
  position: absolute;
  z-index: 2;
  .label {
    line-height: 29px;
  }
}
/deep/.el-dialog__title {
  position: absolute;
  top: 20px;
  width: 85px !important;
}
.yanshou {
  color: #67c23a !important;
}
/deep/ .el-dialog__body .el-form .el-form-item:last-child {
  margin-bottom: 10px;
}
/deep/ .el-dialog__title {
  width: 120px !important;
}
/deep/ .el-table__body-wrapper {
  z-index: 1;
}
</style>
